import { useState } from 'react';
import { Form, Button, Spin } from '@douyinfe/semi-ui';
import { FormApi } from '@douyinfe/semi-ui/form';
import useRequest from '@/hooks/useRequest';

interface RegisterState {
    account: string;
    email: string;
}

export default function Register() {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    const [formAPI, setFormAPI] = useState<FormApi<RegisterState>>();
    const { loading, run: loginSubmit } = useRequest(async () => {
        const values = formAPI!.getValues();

        await new Promise(resolve => {
            setTimeout(() => {
                resolve(undefined);
                console.log(values);
            }, 2000);
        });
    });

    return (
        <Spin spinning={loading}>
            <Form onSubmit={loginSubmit} getFormApi={api => setFormAPI(api)}>
                <Form.Input
                    label="邮箱"
                    field="email"
                    rules={[{ required: true, message: '请输入你的邮箱' }]}
                    placeholder="请输入邮箱"
                />
                <Form.Input
                    label="密码"
                    type="password"
                    field="password"
                    rules={[{ required: true, message: '请输入你的密码' }]}
                    placeholder="密码"
                />
            </Form>
            <Button
                onClick={() => {
                    formAPI?.submitForm();
                }}
            >
                注册
            </Button>
        </Spin>
    );
}
